<template>
  <view class="order-status">
    <img v-if="status==1" class="order-status-1" src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/jiu/success.svg" alt="" />
    <img v-if="status==2" class="order-status-1" src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/jiu/fail.svg" alt="">
    <view class="order-status-2">{{status==1 ? '支付成功': '支付失败'}}</view>
    <view v-if="status==2" class="order-status-3">
      请在15分钟内完成支付，否则订单会被取消;
    </view>
    <view v-if="status==2" class="order-status-3">
      如已支付可稍后查询订单状态，无需重新支付.
    </view>
    <view class="order-status-4">
      <view class="order-status-4-1" @tap="goHome">回到首页</view>
      <button @click="goPink(order_pay_info.pinkId)" class="order-status-4-2" v-if="order_pay_info.pinkId && order_pay_info.paid!=0">邀请好友参团</button>
      <view class="order-status-4-2" v-else @tap="goOrder">查看订单</view>
    </view>
    <official-account></official-account>
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/api.js'
  export default {
    data() {
      return {
        order_id: '',
        status: 1,
        order_pay_info: {}
      }
    },
    onLoad(options) {
      if (options.order_id) {
        this.order_id = options.order_id
        this.getInfo()
      }
    },
    methods: {
      getInfo() {
				let that = this;
				uni.showLoading({
					title: '正在加载中'
				});
				getOrderDetail(that.order_id).then(res => {
					uni.hideLoading();
          this.order_pay_info = res.data
          this.status = res.data.paid ? 1 : 2
					uni.setNavigationBarTitle({
						title: res.data.paid ? '订单状态-支付成功' : '订单状态-支付失败'
					});
				}).catch(err => {
					uni.hideLoading();
				});
			},
      goHome() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      // 去参团页面；
      goPink(id){
				uni.reLaunch({
					url: '/subpageC/combination_status/combination_status?id='+id
				});
			},
      goOrder() {
        if(this.status == 1)  {
        
          uni.reLaunch({
          url: '/subpageB/order_detail/order_detail?orderId=' + this.order_id
        })
        } else {
        
          uni.reLaunch({
          url: '/subpageB/order_list/order_list?orderId=' + this.order_id
        })
        }
      },
    }
  }
</script>

<style lang="scss">
.order-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20rpx;
  &-1 {
    margin-top: 60rpx;
    width: 100rpx;
    height: 100rpx;
  }
  &-2 {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    margin-top: 20rpx;
  }
  &-3 {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    margin-top: 20rpx;
    text-align: center;
  }
  &-4 {
    display: flex;
    justify-content: space-between;
    align-items: cneter;
    margin-top: 40rpx;
    &-1 {
      width: 180rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      border: 1px solid #A8A8A8;
      border-radius: 30px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      margin: 0 10rpx;
    }
    &-2 {
      width: 180rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      border: 1px solid #C72D23;
      border-radius: 30px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 26rpx;
      color: #C72D23;
      margin: 0 10rpx;
    }
  }
}
</style>
